<template>
        <div id="MyCaigouList">
           <!--    导航栏 -->
               <van-nav-bar
                  title="我的采购"
                  left-arrow
                  :fixed=true
                  :border=true
                  @click-left="$router.go(-1)"
               ></van-nav-bar>
        
                <van-cell-group style="margin-top:3rem;">
                   <van-cell  v-for="(list,index) in lists" :key="list.id">
                         <template #title>
                            <span style="font-size:0.5rem;">{{list.xuhao}}.采购编号：</span> <span style="font-size:0.05rem">{{list.bianhao}}</span>
                          </template>
                         <template>
                            <span style="color:red">{{list.status}}</span>
                          </template>
                         <template #label>
                             <span style="font-size:1px;">{{list.time}} 申请</span>
                          </template>
                         <template #right-icon>                
                              <van-icon name="arrow" @click="tiaozhuang(list.bianhao,list.token,list.status)" style="margin-top:0.3rem;margin-left:0.2rem"/>

                          </template>
                   </van-cell>
                </van-cell-group>
                 
                 <!-- 路由的出口 -->
                 <transition name="router-slider" mode="out-in">
                    <router-view></router-view>
                  </transition>
    
        </div>
</template>

<script>
 import {getMyCaigou} from './../../../service/api/index'
import {mapState,mapMutations} from 'vuex'
 import {Toast} from 'vant'
	export default{
		name:"MyCaigouList",
          data(){
           return{
                 lists:[],
          }
         },
      methods:{
               tiaozhuang(bianhao,token,status){
               // console.log(token);
                     this.$router.push({path:'/dashboard/mine/MyCaigouList/MyCaigouDetail',query:{bianhao:bianhao,token:token,status:status}})
               }
      },
      computed:{
          ...mapState(["userInfo"]),

      },
       mounted(){
       //  console.log(this.userInfo.token);
       },
        created(){
                 //请求网络数据   调用getVegetables返回promise对象，然后可以调用promise的then方法，返回请求到的数据(response.data)  
                      getMyCaigou(this.userInfo.token).then((response)=>{
                       console.log(response);
                        if (response.success) {
                             this.lists = response.data;
                          for (var i=0;i<(this.lists).length;i++) {
                               if (this.lists[i].status===0) {
                                    this.lists[i].status='审核中';
                               }else if(this.lists[i].status===1){
                                     this.lists[i].status='派送中';
                               }else if (this.lists[i].status===2) {
                                    this.lists[i].status='审核不通过';
                               }else if (this.lists[i].status===3) {
                                    this.lists[i].status='已完成';
                               };
 
                           }
                        }
                 }).catch(error=>{
                       // todo......
                      console.log(error);
                 })   //---catch
          }, // ----created                       
	}
</script>


<style scoped>
     #MyCaigouList{
     	position:fixed;
     	top:0;
     	left:0;
     	bottom:0;
     	right:0;
     	background-color:#f5f5f5;
     	z-index:200;
          overflow-y: scroll;
     }

     .logout{
     	margin-top:4rem;
     	height:2.5rem;
     	width:100%;
     	background-color:#fff;
     	display:flex;
     	justify-content:center;
     	align-items:center;
     }

     .logout button{
     	background-color:transparent;
     }

         .router-slider-enter-active,.router-slider-leave-active{
      transition:all 0.3s;
    }

    .router-slider-enter,.router-slider-leave-active{
      transform:translate3d(2rem,0,0);
      opacity:0;
    }
</style>